<template>
    <div>
        <div class="container">
            <div style="text-align:right">
                    <el-row>
                        <el-col :span="12" style="text-align: left">
                            <el-button v-popover:popover4>{{dateScopeText}} <i class="el-icon-arrow-down el-icon--right"></i></el-button>
                            <el-popover
                                v-model="dateScopeVisible"
                                ref="popover4"
                                placement="bottom"
                                width="400"
                                trigger="click">
                                <el-date-picker
                                    v-model="dateScope"
                                    type="datetimerange"
                                    :picker-options="pickerOptions"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    @change="handleDateScope"
                                    align="right">
                                </el-date-picker>
                            </el-popover>
                        </el-col>
                        <el-col :span="12" style="text-align: right">
                            <el-button :type="informRank === 0 ? 'success': ''" @click="handleSwitchRank(0)">按举报时间排序</el-button>
                            <el-button :type="informRank === 1 ? 'success': ''" @click="handleSwitchRank(1)">按举报次数排序</el-button>
                        </el-col>
                    </el-row>
            </div>
            <el-table
                :data="informData"
                style="width: 100%">
                <el-table-column align="center" width="120" label="类型">
                    <template slot-scope="scope" >  
                    <span v-if="scope.row.informType === 1" style="color: #409EFF"># 动态</span>
                    <span v-if="scope.row.informType === 2" style="color: #67C23A"># 一级评论</span>
                    <span v-if="scope.row.informType === 3" style="color: #F56C6C"># 二级评论</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="内容">
                    <template slot-scope="scope">
                        <div class="voteManage" v-if="scope.row.informType === 1">
                            <div class="tableScope" v-if="scope.row.voteType === '1'">
                                <div class="tableScopeFirst" v-if="scope.row.defaultText">{{scope.row.defaultText}}</div>
                                <div class="tableScopeFirst" v-if="scope.row.defaultImages">
                                <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultImages)" :key="'imageCell'+indexCell">
                                    <img :src="itemCell" @click="handleMagnifyingImg(itemCell)" title="点击图片放大">
                                </div>
                                </div>
                                <div class="tableScopeFirst" v-if="scope.row.defaultVideos">
                                <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in JSON.parse(scope.row.defaultVideos)" :key="'videoCell'+indexCell">
                                    <video :src="itemCell.url" controls v-if="indexCell === 0"></video>
                                </div>
                                </div>
                                <div class="tableScopeSecond">
                                    <!-- <div class="tableScopeSecondCell">{{scope.row.nickName || '小悦老师'}}</div>
                                    <div class="tableScopeSecondCell">{{scope.row.createTime}}</div>
                                    <div class="tableScopeSecondCell">评论：{{scope.row.forumComment || 0}}</div>
                                    <div class="tableScopeSecondCell">点赞：{{scope.row.forumPraise || 0}}</div> -->
                                </div>
                            </div>
                            <div class="tableScope" v-if="scope.row.voteType === '2'">
                                <div class="tableScopeFirst">
                                <div>{{scope.row.voteTitle}}</div>
                                <div>{{scope.row.voteExplain}}</div>
                                </div>
                                <div class="tableScopeSecond">
                                    <div class="tableScopeSecondCell">{{scope.row.createTime}}</div>
                                    <div class="tableScopeSecondCell">截止时间：{{scope.row.voteAbort}}</div>
                                    <div class="tableScopeSecondCell">已有 {{scope.row.forumVote || 0}} 人投票</div>
                                </div>
                            </div>
                        </div>
                        <div class="comment-content voteManage" v-if="scope.row.informType === 2 || scope.row.informType === 3">
                            <div class="tableScope">
                                <p>评论内容： {{scope.row.comment && scope.row.comment.text ? scope.row.comment.text : ''}}</p>
                                <div class="comment-content-images" v-if="scope.row.comment && scope.row.comment.images">
                                    <div v-for="(itemCell, indexCell) in scope.row.comment.images" :key="'imageCell'+indexCell" :style="{'backgroundImage': 'url('+itemCell+')'}" @click="handleMagnifyingImg(itemCell)" title="点击图片放大"></div>
                                </div>
                                <div  v-if="scope.row.comment && scope.row.comment.video" >
                                    <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in scope.row.comment.video" :key="'videoCell'+indexCell">
                                        <video :src="itemCell.url" controls></video>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="statistics">
                            <el-row>
                                <el-col :span="6">用户名: {{ scope.row.nickName || scope.row.fromName}}</el-col>
                                <el-col :span="8">时间: {{ scope.row.createTime | formatTime}}</el-col>
                                <el-col :span="6">评论: {{ scope.row.forumCommentTotal || 0}}</el-col>
                                <el-col :span="4">点赞: {{ scope.row.forumPraiseTotal || scope.row.praiseTotal}} </el-col>
                            </el-row>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="100" label="举报次数">
                    <template slot-scope="scope" >  
                        <span v-if="scope.row.informType === 1">{{scope.row.forumTotal}}次举报</span>
                        <span v-if="scope.row.informType === 2">{{scope.row.parentTotal}}次举报</span>
                        <span v-if="scope.row.informType === 3">{{scope.row.childTotal}}次举报</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="300" label="操作">
                    <template slot-scope="scope" >  
                        <el-button type="primary" @click="acquireInformUserDetails(scope.row);informItemCurrentPage = 1">查看</el-button>
                        <el-button type="danger" @click="handleDeleteDialogVisible(scope.row)">删除</el-button>
                        <el-button type="info" @click="handleDialogVisible(scope.row)">忽略</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin-top: 30px">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="informTotal">
                </el-pagination>
            </div>
        </div>
        <el-dialog
            title="图片"
            :visible.sync="magnifyingImgVisible"
            width="80%">
            <div>
                <img :src="magnifyingImg" style="width: 100%">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="magnifyingImgVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">
            <span>是否忽略该举报?</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmOverlookInform()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="deleteDialogVisible"
            width="30%">
            <div>
                <p style="margin-bottom: 30px;">
                    <el-alert
                        title="填写删除理由"
                        type="error"
                        :closable="false"
                        show-icon>
                    </el-alert>
                </p>
                <el-input v-model="deleteDescribe" placeholder="请输入内容"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="提示"
            :visible.sync="deleteDialogVisible"
            width="30%">
            <div>
                <p style="margin-bottom: 30px;">
                    <el-alert
                        title="填写删除理由"
                        type="error"
                        :closable="false"
                        show-icon>
                    </el-alert>
                </p>
                <el-input v-model="deleteDescribe" placeholder="请输入内容"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmDeleteInformPlace()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="查看详情"
            :visible.sync="showDetailsDialogVisible"
            width="80%">
            <div style="text-align: right; margin-bottom: 30px;">
                <el-button type="danger" @click="handleDeleteDialogVisible(temporaryData)">删除</el-button>
                <el-button type="info" @click="handleDialogVisible(temporaryData)">忽略</el-button>
            </div>
            <div class="inform-content">
                <div  class="comment-content" v-if="temporaryData.informType === 1">
                    <!-- 动态详情 -->
                    <DynamicDetails  :matterId="temporaryData.matterId" :dynamicType="3"  v-if="temporaryData.informType === 1"></DynamicDetails>
                </div>
                <!-- 评论 -->
                <div class="comment-content voteManage" v-if="temporaryData.informType === 2 || temporaryData.informType === 3">
                    <div class="tableScope">
                        <p>评论内容： {{temporaryData.comment.text}}</p>
                        <div class="comment-content-images">
                            <div v-for="(itemCell, indexCell) in temporaryData.comment.images" :key="'imageCell'+indexCell" :style="{'backgroundImage': 'url('+itemCell+')'}" @click="handleMagnifyingImg(itemCell)" title="点击图片放大"></div>
                        </div>
                            <div class="tableScopeFirstCell" v-for="(itemCell, indexCell) in temporaryData.comment.video" :key="'videoCell'+indexCell">
                            <video :src="itemCell.url" controls></video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="inform-list">
                <h3>举报内容（{{informItemTotal}}条）</h3>
                <div class="inform-item">
                    <div class="inform-item-details" v-for="item in informItemList" :key="JSON.stringify(item)">
                        <el-row>
                            <el-col :span="4" style="text-align: left">
                                用户名：{{item.nickName}}
                            </el-col>
                            <el-col :span="8" style="text-align: left">
                                时间：{{item.createTime | formatTime}}
                            </el-col>
                        </el-row>
                        <p>内容：{{item.describe}}</p>
                    </div>
                    <div style="text-align: right;margin-top: 30px">
                        <el-pagination
                            @current-change="handleInformCurrentChange"
                            :current-page.sync="informItemCurrentPage"
                            :page-size="10"
                            layout="prev, pager, next, jumper"
                            :total="informItemTotal">
                        </el-pagination>
                    </div>
                </div>
            </div>
            <div>
                <!-- <commentItem :id="temporaryData.forumId" v-if="temporaryData.forumId && showDetailsDialogVisible"></commentItem> -->
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDetailsDialogVisible = false">返 回</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {
    obtainInformList,
    overlookInform,
    informUserDetails,
    deleteInformPlace
} from "@/config/api";
import { dateRegExp } from "@/config/filter";
import DynamicDetails from '@/components/page/forumManage/dynamicDetails/dynamicDetails.vue'
// import commentItem from '@/components/common/comment.vue'
export default {
    components: {
        DynamicDetails,
        // commentItem
    },
    data () {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            // 举报列表数据
            informData: [],
            // 0按照举报时间排序 1按举报次数排序
            informRank: 0,
            // 某个时间段
            dateScope: '',

            // 被放大的图片
            magnifyingImg: '',
            // 图片放大器
            magnifyingImgVisible:false,
            
            // 忽略 对话框
            dialogVisible: false,
            // 临时保存的数据
            temporaryData: '',
            // 分页 当前页码
            currentPage: 1,
            // 举报总数量
            informTotal: 0,

            // 删除 对话框
            deleteDialogVisible: false,
            // 填写删除理由
            deleteDescribe: '',

            // 举报详情列表
            informDetailsData: [],
            // 举报详情列表 总数
            informDetailsTotal: 0,

            // 时间范围的描述
            dateScopeText: '时间',
            // 时间范围 显示
            dateScopeVisible: false,

            // 查看详情
            showDetailsDialogVisible: false,
            // 举报用户列表
            informItemList: [],
            // 举报用户列表 页码
            informItemCurrentPage: 1,
            // 举报用户列表 总数
            informItemTotal: 0,
        }
    },
    filters: {
        formatTime(time) {
            return dateRegExp(time - 0, "yyyy-MM-dd hh:mm:ss");
        }
    },
    mounted () {
        // 获取举报列表
        this.acquireInformList()
    },
    methods: {
        // 获取举报列表
        async acquireInformList () {
            const page = this.currentPage;
            const rank = this.informRank;
            const startTime = this.dateScope ? this.dateScope[0] : '';
            const endTime = this.dateScope ? this.dateScope[1] : '';
            const res = await obtainInformList(page, rank, startTime, endTime);
            if (res.status === 200) {
                this.informData = res.data;
                // 举报总数量
                this.informTotal = res.total;
            }
        },
        // 切换排序
        handleSwitchRank (num) {
            this.informRank = num;
            this.currentPage = 1;
            this.acquireInformList();
        },
        // 放大图片观看
        handleMagnifyingImg (img) {
            this.magnifyingImgVisible = true;
            this.magnifyingImg = img;
        },
        // 忽略 触发对话框
        handleDialogVisible (row) {
            this.dialogVisible = true;
            this.temporaryData = row; 
        },
        // 确定忽略举报
        async confirmOverlookInform () {
            const informType = this.temporaryData.informType;
            let id = '';
            if (informType === 1) {
                id = this.temporaryData.forumId;
            };
            if (informType === 2) {
                id = this.temporaryData.parentId;
            };
            if (informType === 3) {
                id = this.temporaryData.childId;
            };
            // 提交忽略
            const res = await overlookInform(id,informType);
            if (res.status === 200) {
                this.$message({
                    message: '忽略成功',
                    type: 'success'
                });
                // 对话框关闭
                this.dialogVisible = false;
                // 举报
                this.showDetailsDialogVisible = false;
                // 重新获取举报列表数据
                this.acquireInformList();
            } else {
                this.$message({
                    message: '忽略失败，请稍后再试',
                    type: 'error'
                });
            }
        },

        // 删除 触发对话框
        handleDeleteDialogVisible (row) {
            this.temporaryData = row;
            this.deleteDialogVisible = true;
            this.deleteDescribe = '';
        },
        // 确定 举报成功 删除相关信息
        async confirmDeleteInformPlace () {
            const informType = this.temporaryData.informType;
            const describe = this.deleteDescribe;
            if (!describe) {
                this.$message({
                    message: '请填入删除内容',
                    type: 'error'
                });
                return false;
            }
            let id = '';
            if (informType === 1) {
                id = this.temporaryData.forumId;
            };
            if (informType === 2) {
                id = this.temporaryData.parentId;
            };
            if (informType === 3) {
                id = this.temporaryData.childId;
            };
            // 提交删除
            const res = await deleteInformPlace(id, informType, describe);
            if (res.status === 200) {
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                // 关闭弹窗
                this.deleteDialogVisible = false;
                this.showDetailsDialogVisible = false;
                // 重新获取举报列表
                this.currentPage = 1;
                this.acquireInformList();
            };
        },

        // 查看 获取举报的用户
        async acquireInformUserDetails (row) {
            this.temporaryData = row;
            const informType = this.temporaryData.informType;
            const page = this.informItemCurrentPage;
            let id = '';
            if (informType === 1) {
                id = this.temporaryData.forumId;
            };
            if (informType === 2) {
                id = this.temporaryData.parentId;
            };
            if (informType === 3) {
                id = this.temporaryData.childId;
            };
            const res = await informUserDetails(id, informType, page);
            if (res.status === 200) {
                this.showDetailsDialogVisible = true;
                this.informItemList = res.data;
                this.informItemTotal = res.total;
            } else {
                this.$message({
                    message: '网络拥堵，请稍后再试',
                    type: 'error'
                });
            }
        },
        // 某个时间段 重新获取举报列表
        handleDateScope (date) {
            this.dateScope = date;
            if (date === null) {
                this.dateScopeText = '时间';
            } else {
                let startTime = dateRegExp(new Date(date[0]).getTime(), "yyyy年MM月dd日 hh:mm:ss")
                let endTime = dateRegExp(new Date(date[1]).getTime(), "yyyy年MM月dd日 hh:mm:ss")
                this.dateScopeText = startTime + ' - ' + endTime;
              
            }
            this.dateScopeVisible = false;
            // 重新获取举报数据
            this.currentPage = 1;
            this.acquireInformList();
        },
        // 触发 分页  举报列表
        handleCurrentChange (val) {
            this.currentPage = val;
            this.acquireInformList();
        },
        // 触发 分页  举报用户列表
        handleInformCurrentChange (val) {
            this.informItemCurrentPage = val;
            this.acquireInformUserDetails();
        }
    }
}
</script>
<style lang="less" scoped>
@import './informManage.less';
</style>

